<!--
 * @Author: Do Vis 2975274582@qq.com
 * @Date: 2024-05-14 14:53:43
 * @LastEditors: Do Vis 2975274582@qq.com
 * @LastEditTime: 2024-05-14 16:09:40
 * @FilePath: \用户前端项目vue3\src\views\bpmn\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE   
-->
<template>
  <div class="containerBox" style="position: relative">
    <div
      id="container"
      style="width: calc(100vw - 750px); height: calc(100vh - 150px)"
    ></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>

<script setup>
// 引入汉化js
import translate  from '@/assets/bpmn/translate.js'
import { onMounted, markRaw } from "vue";
// bpmn-js相关
import "bpmn-js/dist/assets/diagram-js.css"; // 左边工具栏以及编辑节点的样式
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
import BpmnModeler from "bpmn-js/lib/Modeler";
// bpmn-js-properties-panel相关
import "bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";

var customTranslateModule = {
    translate: ['value', translate]
}

onMounted(() => {
  const containerEl = document.getElementById("container");
  const bpmnModeler = markRaw(
    new BpmnModeler({
      container: containerEl,
      // 添加控制板
      propertiesPanel: {
        parent: "#js-properties-panel",
      },
      // 右侧属性面板, 调用中文汉化 customTranslateModule
      additionalModules: [propertiesPanelModule, propertiesProviderModule, customTranslateModule],
      moddleExtensions: {
        camunda: camundaModdleDescriptor,
      },
    })
  );

  bpmnModeler.createDiagram(async () => {
    await bpmnModeler.get("canvas").zoom("fit-viewport");
  });

});
</script>
<style >
.containerBox {
  height: calc(100vh - 160px);
  margin-bottom: 30px;
  margin-top: 30px;
}

.containerBox #container {
  height: calc(100vh - 100px);
  margin-left: 100px;
  border: 1px solid rgb(121, 121, 121);
}

.bpp-properties-panel [type="text"] {
  box-sizing: border-box;
}

.panel {
  width: 400px;
  position: absolute;
  top: 1px;
  right: 5px;
  height: 100%;
  overflow: auto;
}

/* 右下角logo */
.bjs-powered-by {
  display: none;
}
</style>